<script lang="ts" setup>
import { computed, onBeforeMount, ref, useTemplateRef, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import AssistantCardPC from '@/components/AssistantCardPC.vue'
import { useAssistantListStore } from '@/store/assistantListStore'
import type { AssistantProps } from '@/type'
import { displayOrder, AssistantList } from '@/config'

const isLoading = ref(true)
const stickyClass = ref('')
const router = useRouter()

const store = useAssistantListStore()
const { getCompletedAssistantList, clear, readAll } = store

const { completedList, allCompleted } = storeToRefs(store)

const hdlAssistantCard = async (item: AssistantProps) => {
  router.push({
    name: 'assistant',
    params: {
      id: item.key,
    },
  })
}
const stickyPlaceholder = useTemplateRef('stickyPlaceholder')

watch(stickyPlaceholder, (newValue) => {
  if (!newValue) return
  // console.log('stickyPlaceholder changed:', newValue)
  const observer = new IntersectionObserver(
    ([e]) => {
      if (e.intersectionRatio <= 0) {
        stickyClass.value = 'sticky'
      } else {
        stickyClass.value = ''
      }
    },
    { rootMargin: '-10px 0px 0px 0px' },
  )
  observer.observe(newValue as HTMLElement)
})

onBeforeMount(async () => {
  isLoading.value = true
  await getCompletedAssistantList()
  isLoading.value = false
})
</script>

<template>
  <div
    class="lzc-assistant-pc-home w-full bg-white flex flex-col items-center select-none"
  >
    <div class="h-[40px] w-full" ref="stickyPlaceholder"></div>
    <div v-if="allCompleted">
      <div class="w-[120px] h-[120px] mx-auto mt-[0px]">
        <img
          src="/all_completed_pc.png?v=2"
          draggable="false"
          class="w-full h-full object-cover"
        />
      </div>
    </div>
    <div
      class="lzc-assistant-pc-home__sticky w-full top-0 bg-[#fff]"
      :class="stickyClass"
      ref="stickyRef"
    >
      <div
        class="home-title text-[#333333] text-[30px] font-semibold leading-[42px] text-center"
      >
      {{ allCompleted ? '恭喜你，完成挑战' : '玩机挑战' }}
      </div>
      <div class="h-[76px] text-center score relative">
        <span class="leading-[76px] text-[#2EC1CC] text-[60px] font-bold">
          {{ completedList.length }}
        </span>
        <span class="leading-[44px] text-[#999999] text-[20px] font-bold">
          /{{ displayOrder.length }}
        </span>
      </div>
    </div>

    <!-- <div class="h-[1px] w-full mb-[39px]"></div> -->
    <div class="flex-1 scrollbar-hidden pt-[10px] relative">
      <div class="grid grid-cols-2 gap-x-[40px] gap-y-[24px] mt-[40px]">
        <AssistantCardPC
          v-for="(item, index) in AssistantList"
          v-bind="item"
          :key="item.key"
          :hadCompleted="isLoading || completedList.includes(item.key)"
          @click="hdlAssistantCard(item)"
        />
      </div>
    </div>
    <div class="flex justify-center pt-[60px] pb-[48px]"><button  class="read-all-button" v-if="!allCompleted" @click="readAll()">全部已读</button></div>
  </div>
</template>
<style scoped>
/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.score::after {
  content: '';
  display: block;
  width: 100%;
  height: 20px;
  background: linear-gradient(180deg, #fff 0, transparent 100%);
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hidden {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.lzc-assistant-pc-home .home-title {
  padding-top: 10px;
  height: 60px;
}

.lzc-assistant-pc-home__sticky {
  z-index: 1000;
}
</style>
